🦋 Changeset detected

Latest commit: fcfdce3

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Walkthrough

Comprehensive feature release introducing installments/pay-later payment modes, redesigned home screen with new CardStatus and PortfolioSummary components, font unification to SplineSans, widespread design token standardization across spacing, new payment-related UI sheets, hook refactoring, and Spanish translation expansion. Includes Maestro E2E test updates validating new payment flows.

Changes

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Home as Home Component
    participant CardStatus as CardStatus Component
    participant PayModeSheet as PayModeSheet
    participant InstallmentsSheet as InstallmentsSheet
    participant useInstallmentRates as useInstallmentRates Hook
    participant mutateMode as setCardMode Mutation
    participant Backend as Backend API

    User->>Home: Opens Home Screen
    Home->>CardStatus: Renders with mode, collateral, creditLimit
    User->>CardStatus: Taps "Now/Later" Toggle
    CardStatus->>PayModeSheet: Opens mode selection
    User->>PayModeSheet: Selects "Pay Later"
    PayModeSheet->>CardStatus: Calls onModeChange
    CardStatus->>InstallmentsSheet: Opens installment selector
    User->>InstallmentsSheet: Selects installment count
    InstallmentsSheet->>useInstallmentRates: Requests APR for selection
    useInstallmentRates->>Backend: Queries market data
    Backend-->>useInstallmentRates: Returns rates, utilization
    useInstallmentRates-->>InstallmentsSheet: Returns payment schedule
    InstallmentsSheet->>User: Displays APR and payments
    User->>InstallmentsSheet: Confirms installment count
    InstallmentsSheet->>mutateMode: Calls onModeChange(installmentCount)
    mutateMode->>Backend: POST card mode change
    Backend-->>mutateMode: Confirms update, returns new limits
    mutateMode->>Home: Updates state optimistically
    Home->>CardStatus: Re-renders with new mode/limits
    CardStatus-->>User: Displays updated spending limit

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

• ✨ misc app improvements #705: Modifies CardStatus.tsx animation props; directly intersects with the major CardStatus API redesign in this PR.
• ✅ e2e misc improvements #702: Updates Maestro flows with readHome/readPortfolio-like subflows; overlaps with the E2E test restructuring included here.
• 💫 improve carousel transitions #701: Refactors BenefitsSection.tsx carousel/pagination logic; impacts the same benefits carousel refinements in this PR.

Suggested reviewers

• cruzdanilo
• franm91

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Summary of Changes

Hello @dieguezguille, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a comprehensive redesign of the application's core user interface, specifically targeting the home and payments sections. The changes aim to modernize the application's appearance, improve navigation, and introduce new functionalities such as an installments calculator and enhanced card management options. The update focuses on providing a more intuitive and visually appealing experience for users interacting with their financial data and card services.

Highlights

• UI Revamp: The home and payments screens have undergone a significant visual overhaul, including redesigned components for the tab bar, card status, action buttons, benefits carousel, and portfolio summary. New fonts and spacing tokens have been applied across the application for a refreshed look.
• New Payments Screen: A dedicated payments screen has been implemented, providing a centralized view for total outstanding amounts, overdue payments, and upcoming payments, along with detailed information and actions for each.
• Installments Calculator: A new installments calculator feature has been added, allowing users to estimate the cost of purchases across various installment plans.
• Card Mode Management: The card mode mutation logic has been unified, and new UI components for managing and understanding card spending and credit limits have been introduced, including an interactive spotlight for installment selection.
• Maestro Test Flow Updates: Maestro test flows have been updated to reflect the new UI and functionalities, ensuring continued test coverage for the revamped home and payments features.

✅ All tests passed.

Greptile Summary

redesigned home screen with new installments payment system and visual refresh

• replaced BDOGrotesk and IBM Plex Mono fonts with SplineSans family throughout the app
• added interactive pay mode toggle (Now/Later) to CardStatus component with animated limit paginator showing spending limit in debit mode and credit limit with collateral in credit mode
• implemented InstallmentsSheet for selecting 1-12 installments with real-time APR display using new useInstallmentRates hook that calculates rates via splitInstallments and fixedRate from @exactly/lib
• added InstallmentsSpotlight onboarding overlay with SVG mask cutout and auto-scroll positioning to highlight installments feature
• created PayModeSheet educational modal explaining Now vs Later payment modes
• refactored PortfolioSummary and added new Amount component for consistent currency formatting
• updated typography system in Text component with explicit line heights and letter spacing values
• modified spacing token scale in tamagui config (removed intermediate values, adjusted upper range)
• changed default animation from moderate spring to default timing with bezier easing
• expanded Spanish translations for installments and payment flows

Confidence Score: 4/5

• safe to merge with one minor style optimization recommended
• large but well-structured UI refactor with proper state management, no critical bugs found, one inefficient array initialization pattern that doesn't affect functionality
• pay close attention to src/utils/useInstallmentRates.ts for the array initialization pattern

Important Files Changed

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    Start[User opens Home screen] --> CardStatus[CardStatus Component]
    CardStatus --> Toggle{Pay Mode Toggle}
    Toggle -->|Now mode = 0| DebitView[Shows Spending Limit]
    Toggle -->|Later mode > 0| CreditView[Shows Credit Limit]
    
    Toggle --> InstallmentsButton[User taps Later toggle]
    InstallmentsButton -->|mode = 0| SetMode[Set mode to lastInstallments ?? 1]
    InstallmentsButton -->|mode > 0| OpenSheet[Open InstallmentsSheet]
    
    OpenSheet --> SelectInstallments[InstallmentsSheet]
    SelectInstallments --> LoadRates[useInstallmentRates hook]
    LoadRates --> CalcRates[Calculate APR for 1-12 installments]
    CalcRates --> Display[Display horizontal scroll cards]
    Display --> UserSelect[User selects installment count]
    UserSelect --> UpdateMode[Call onModeChange with selected count]
    UpdateMode --> MutateMode[mutateMode API call]
    MutateMode --> UpdateCache[Update queryClient cache]
    
    CardStatus --> LearnMore[User taps Learn More]
    LearnMore --> PayModeSheet[PayModeSheet Component]
    PayModeSheet --> ExplainModes[Explain Now vs Later modes]
    
    CreditView --> Payment[User makes purchase]
    Payment --> CreateDebt[Debt created with maturity]
    CreateDebt --> HomePayments[OverduePayments/UpcomingPayments]
    HomePayments --> PaymentClick[User clicks payment]
    PaymentClick --> PayComponent[Pay Component]
    PayComponent --> AssetSelect[Select payment asset]
    AssetSelect --> CalcRoute[Calculate swap route if needed]
    CalcRoute --> RepayDebt[Execute repayAtMaturity]

_{Last reviewed commit: 1220ff6}